<template>
  <div class="page-container-padding">
    <div>
      <el-select v-model="curMsgType" size="mini">
        <el-option
          v-for="t in msgTypes"
          :key="t.key"
          :value="t.key"
          :label="t.name"
        />
      </el-select>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 8px"
        :loading="curData.queryLoading"
        @click="toQueryMessage"
      >
        查询
      </el-button>
      <el-pagination
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :current-page="curData.page"
        :page-size="curData.pageSize"
        :total="curData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <div style="margin-top: 16px">
      <el-table
        border
        stripe
        size="mini"
        :data="curData.dataList"
        :row-style="{ height: '70px' }"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="msg_time" label="信息时间" width="160" />
        <el-table-column prop="content" label="信息内容" />
        <el-table-column label="状态" width="70" align="center">
          <template #default="scope">
            <el-tag
              size="mini"
              :type="scope.row.is_active ? 'success' : 'danger'"
            >
              {{ scope.row.is_active ? '公开' : '隐蔽' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template #default="scope">
            <el-button type="text" @click="toUpdateMessage(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑短讯息弹窗 -->
    <el-dialog :visible.sync="editDialog.isShow" title="修改短讯息">
      <el-form size="mini" label-width="80px">
        <el-form-item label="时间">
          <el-input v-model="editDialog.msg_time" placeholder="短信息的时间" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="editDialog.content"
            type="textarea"
            placeholder="短信息的内容"
            :rows="5"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="editDialog.is_active"
            active-text="公开"
            inactive-text="隐蔽"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialog.isShow = false">取消</el-button>
        <el-button
          type="primary"
          :loading="editDialog.saveLoading"
          @click="toSaveUpdateRow"
        >
          确定保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { RetrieveMessage, UpdateMessage } from '@/api/adminRuizhi/instantMsg'
  export default {
    data() {
      return {
        msgTypes: [
          { key: 1, name: '短讯通' },
          { key: 2, name: '24h快讯' },
        ],
        curMsgType: 1,
        curData: {
          queryLoading: false,
          page: 1,
          pageSize: 15,
          totalCount: 0,
          dataList: [],
        },
        editDialog: {
          isShow: false,
          rid: -1,
          msg_time: '',
          content: '',
          is_active: '',
          saveLoading: false,
        },
      }
    },
    mounted() {
      this.getMessageData()
    },
    methods: {
      getMessageData() {
        this.curData.queryLoading = true
        RetrieveMessage(
          this.curMsgType,
          this.curData.page,
          this.curData.pageSize
        ).then((res) => {
          this.curData.dataList = res.data.rows
          this.curData.totalCount = res.data.total_count
          this.curData.queryLoading = false
        })
      },

      toQueryMessage() {
        this.curData.page = 1
        this.getMessageData()
      },

      currentPageChanged(page) {
        this.curData.page = page
        this.getMessageData()
      },

      toUpdateMessage(row) {
        this.editDialog.rid = row.id
        this.editDialog.msg_time = row.msg_time
        this.editDialog.content = row.content
        this.editDialog.is_active = row.is_active
        this.editDialog.isShow = true
      },

      toSaveUpdateRow() {
        const bodyData = {
          rid: this.editDialog.rid,
          msg_time: this.editDialog.msg_time,
          content: this.editDialog.content,
          is_active: this.editDialog.is_active,
        }
        UpdateMessage(bodyData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.editDialog.isShow = false
          this.getMessageData()
        })
      },
    },
  }
</script>
<style scoped lang="scss"></style>
